<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>九大行星公转演示</title>
  <style>
    body { margin: 0; background: #000; }
    canvas { display: block; margin: 0 auto; background: #000; }
  </style>
</head>
<body>
<canvas id="solarSystem" width="1200" height="800"></canvas>
<script>
const canvas = document.getElementById('solarSystem');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

// 行星数据
const planets = [
  { name: '水星', color: '#b5b5b5', radius: 60, size: 5, speed: 0.04 },
  { name: '金星', color: '#e6c200', radius: 90, size: 8, speed: 0.03 },
  { name: '地球', color: '#3a6cf6', radius: 120, size: 9, speed: 0.025 },
  { name: '火星', color: '#e65c3a', radius: 150, size: 7, speed: 0.02 },
  { name: '木星', color: '#e6b87a', radius: 200, size: 18, speed: 0.013 },
  { name: '土星', color: '#e6d87a', radius: 260, size: 16, speed: 0.01 },
  { name: '天王星', color: '#7adbe6', radius: 320, size: 13, speed: 0.007 },
  { name: '海王星', color: '#3a8be6', radius: 380, size: 13, speed: 0.005 },
  { name: '冥王星', color: '#b5b5b5', radius: 430, size: 4, speed: 0.003 }
];

let angle = 0;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 画太阳
  ctx.save();
  ctx.shadowBlur = 60;
  ctx.shadowColor = "#fff700";
  ctx.beginPath();
  ctx.arc(centerX, centerY, 30, 0, 2 * Math.PI);
  ctx.fillStyle = "#fff700";
  ctx.fill();
  ctx.restore();

  // 画轨道
  ctx.strokeStyle = "rgba(255,255,255,0.2)";
  ctx.lineWidth = 1;
  planets.forEach(p => {
    ctx.beginPath();
    ctx.arc(centerX, centerY, p.radius, 0, 2 * Math.PI);
    ctx.stroke();
  });

  // 画行星
  planets.forEach((p, i) => {
    const planetAngle = angle * p.speed + i;
    const x = centerX + Math.cos(planetAngle) * p.radius;
    const y = centerY + Math.sin(planetAngle) * p.radius;

    // 行星
    ctx.beginPath();
    ctx.arc(x, y, p.size, 0, 2 * Math.PI);
    ctx.fillStyle = p.color;
    ctx.shadowBlur = 10;
    ctx.shadowColor = p.color;
    ctx.fill();
    ctx.shadowBlur = 0;

    // 行星名称
    ctx.font = "16px 微软雅黑";
    ctx.fillStyle = "#fff";
    ctx.fillText(p.name, x + p.size + 4, y);

    // 地球加月球
    if (p.name === '地球') {
      const moonAngle = angle * 0.08;
      const mx = x + Math.cos(moonAngle) * 18;
      const my = y + Math.sin(moonAngle) * 18;
      ctx.beginPath();
      ctx.arc(mx, my, 3, 0, 2 * Math.PI);
      ctx.fillStyle = "#ccc";
      ctx.fill();
      ctx.font = "12px 微软雅黑";
      ctx.fillText("月球", mx + 6, my);
    }
  });

  angle += 0.02;
  requestAnimationFrame(draw);
}

draw();
</script>
</body>
</html>

